<template>
  <view class="list">
    <el-button
      class="ml-1 plus-btn"
      type="primary"
      icon="Plus"
      @click="addItem()"
    />
    <el-scrollbar style="height: 500px;">
      <view class="list-item" v-for="(item, index) in imgLst" :key="item.value">
        <UniImageUpload height="80" width="80" v-model="item.src" />
        <el-input class="ml-1" style="width: 100px;" v-model="item.title" placeholder="请输入描述"></el-input>
        <el-button
          class="ml-1"
          type="primary"
          :plain="true"
          size="small"
          icon="Minus"
          @click="deleteItem(index)"
        />
      </view>
    </el-scrollbar>
  </view>
</template>

<script>
  import UniImageUpload from '/common/components/UniImageUpload'
  
  export default {
    name: 'selectWordType',
    components: { UniImageUpload },
    props: {
      mainBgList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        imgLst: []
      }
    },
    watch: {
      mainBgList(val) {
        debugger
        this.imgLst = val
      }
    },
    mounted() {
      this.imgLst = this.mainBgList
    },
    methods: {
      addItem(val) {
        this.imgLst.push({ src: '', title: '' })
      },
      deleteItem(index) {
        this.imgLst.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    .list-item {
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 300px;
      .img {
        width: 80px;
      }
      &.list-item_select {
        border: 1px solid red;
      }
      .ml-1 {
        margin-left: 10px;
      }
    }
    .plus-btn {
      width: 100px;
      margin-top: 10px;
    }
  }
</style>